<template>
  <div>
      <Row>
        <i-col span='4'><img :src="infoMsg.cover" alt="" width="100%" height="150px"></i-col>
        <i-col span='18' offset='1'>
            <h2>{{infoMsg.title}}</h2>
            <Row class="marginT20 f16">
                <i-col :span='widthNum'>
                    <!-- <p class="f16">{{infoMsg.digest}}</p> -->
                    <p v-html="infoMsg.content" class="f16"></p>
                </i-col>
                <i-col v-if="collect" class="info-button" span='4' offset='2'>
                    <i-button @click="btnClick" v-if='button' type="success">取消收藏</i-button>
                    <span v-else>取消收藏</span>
                    </i-col>
            </Row>
            
            <Row class="marginT20 f16">
                <i-col span='4'><span>{{infoMsg.isource}}</span></i-col>
                <i-col span='3' :offset='offsetNum'><span>{{infoMsg.createDate}}</span></i-col>
            </Row>
        </i-col>
    </Row>
  </div>
</template>

<script>
export default {
    props:{
        img:{
            type:String,
            default:''
        },
        collect:{
            type:Boolean,
            default:false
        },
        button:{
            type:Boolean,
            default:false
        },
        infoMsg:{
            type:Object,
        }
    },
    computed:{
        widthNum(){
            return this.collect ?  18 :  24
        },
        offsetNum(){
            return this.collect ?  11 :  17
        }
    },
    methods:{
        btnClick(){
            this.$emit('infoBnt',this.infoMsg.id)
        }
    }

}
</script>

<style>
.info-button{
    margin-top: 10px;
}
</style>